<template>
  <div class="search-container justify-end">
    <div class="input-group">
      <v-text-field
        class="input-search"
        label="search keyword"
        light
        solo
        dense
        flat
      ></v-text-field>
      <div class="dividing-line"></div>
      <v-select
        v-model="selectedSearch"
        attach=".search-select"
        class="input-select search-select"
        :items="searchItems"
        label="search select"
        light
        solo
        dense
        flat
      ></v-select>
    </div>
    <div class="icon-group">
      <v-icon class="icon" medium color="white"> mdi-magnify </v-icon>
      <v-icon
        class="icon"
        medium
        :color="showCustomFilter ? '#EB9B31' : 'white'"
        @click="toggleCustomFilter"
        >mdi-tune</v-icon
      >
      <v-menu
        v-model="showCustomFilter"
        :absolute="true"
        attach=".search-container"
        content-class="filter-wrap rounded-0 elevation-0"
        :close-on-content-click="false"
        :position-y="44"
        min-width="100%"
      >
        <CustomFilter @close="closeCustomFilter" />
      </v-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import CustomFilter from "@/components/Search/CustomFilter.vue";
@Component({
  components: {
    CustomFilter,
  },
})
export default class Search extends Vue {
  get selectedSearch() {
    if (this.$route.matched.length === 0) return null;
    return this.$route.matched[0].meta.menuTitle;
  }

  set selectedSearch(selectedSearch: string | null) {
    this.$store.commit("setSelectedSearch", selectedSearch);
  }
  showCustomFilter = false;

  closeCustomFilter() {
    this.showCustomFilter = false;
  }

  toggleCustomFilter() {
    this.showCustomFilter = !this.showCustomFilter;
  }

  get searchItems() {
    return this.$store.state.searchItems;
  }
}
</script>

<style lang="scss">
@import "./Search.scss";
</style>
